<template>
	<view>
		<nav-bar></nav-bar>
		<view class="foundPage">
			<view class="foundInfo">
				<view class="titleName">创建主柜</view>
				<view class="contentTypeRadio">
					<view class="titleR">柜体类型：</view>
					<radio-group class="radioTypeTop" @change="radioChange">
						<label class="radioInfo" v-for="(item,index) in titleType" :key="index">
							<view>
								<radio color="#007AFF" :value="index" :checked="index === current"/>
							</view>
							<view class="radioText">{{item}}</view>
						</label>
					</radio-group>
				</view>
				<view class="contentBox">
					<view class="title">名称：</view>
					<input type="text"
						class="name_box"
						:placeholder="placeholders"
						@focus="isFocus = true"
						@blur="blurStyle"
						:class="{focusstyle:isFocus}"
						v-model="cabName"
					/>		
				</view>
				<Spicks titleName="刷卡器" ref="cardSpicks" :array="card_list" :index="card_index" />
				<!-- <view class="contentBox">
					<view class="btitle">刷卡器：</view>
					<input type="text"
						class="name_box"
						placeholder="请填写卡号"
						@focus="isFocus2 = true"
						@blur="blurStyle2"
						:class="{focusstyle:isFocus2}"
						v-model="cabCard"
					/>		
				</view> -->
		<!-- 		<view class="contentBox">
					<view class="title">编号：</view>
					<input type="text"
						class="name_box"
						placeholder="请填写机柜的编号"
						@focus="isFocus2 = true"
						@blur="blurStyle2"
						:class="{focusstyle:isFocus2}"
						v-model="serial_number"
					/>		
				</view> -->
				<view class="contentBoxR">
					<view class="titleR">RFID：</view>
					<checkbox-group class="checkBtn" @change="checkboxChange">
						<label class="checkInfo" v-for="(checkItem,index) in checkList" :key="checkItem.name" >
							<view>
								<checkbox :value="checkItem.name"/>
							</view>
							<view class="checkText">{{checkItem.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="contentBoxRadio">
					<view class="titleR">门开关：</view>
					<radio-group class="radioTop" @change="doorRadioChange">
						<label class="radioInfo" v-for="(item,index) in door_list" :key="index">
							<view>
								<radio color="#007AFF" :value="item.name" />
							</view>
							<view class="radioText">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<!-- <view class="contentTypeRadio">
					<view class="titleR">刷卡器：</view>
					<radio-group class="radioTypeTop" @change="cardRadioChange">
						<label class="radioInfo" v-for="(item,index) in card_list" :key="index">
							<view>
								<radio color="#007AFF" :value="item.name" />
							</view>
							<view class="radioText">{{item.name}}</view>
						</label>
					</radio-group>
				</view> -->
				<!-- <view class="contentTypeRadio">
					<view class="titleR">扫码器：</view>
					<radio-group class="radioTypeTop" @change="scanRadioChange">
						<label class="radioInfo" v-for="(item,index) in scan_list" :key="index">
							<view>
								<radio color="#007AFF" :value="index" />
							</view>
							<view class="radioText">{{item.name}}</view>
						</label>
					</radio-group>
				</view> -->
				<!-- <Spicks titleName="刷卡器" :array="card_list" :index="card_index" />
				<Spicks titleName="RFID" :array="rfid_list" :index="rfid_index" />
				<Spicks titleName="扫码器" :array="scan_list" :index="scan_index" />
				<Spicks titleName="门开关" :array="door_list" :index="door_index" /> -->
				<view class="search">
					<button class="search-btn" type="default" @tap="confirm">确认</button>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '../../components/common/nav-bar.vue'
	import { mapState } from 'vuex'
	import Spicks from '../../components/common/spicks.vue'
	import { addMasterCabinet,getDeviceList } from "../../utils/api.js"
	export default {
		components:{
			NavBar,
			Spicks
		},
		data() {
			return {
				// serial_number: "",
				card_index:0,
				// scan_index:0,
				// rfid_index:0,
				// door_index:0,
				checkList:[
					{
						name:'1'
					},
					{
						name:'2'
					},
					{
						name:'3'
					},
					{
						name:'4'
					},
					{
						name:'5'
					},
					{
						name:'6'
					},
					{
						name:'7'
					},
					{
						name:'8'
					},
					{
						name:'9'
					},
					{
						name:'10'
					},
					{
						name:'11'
					},
					{
						name:'12'
					},
					{
						name:'13'
					},
					{
						name:'14'
					},
					{
						name:'15'
					},
					{
						name:'16'
					},
				],
				card_list: [{name:""}],	
				scan_list: [{name:""}],
				rfid_list: [{name:1},{name:2}, {name:3}, {name:4},{name:5},{name: 6}, {name:7}, {name:8},{name:9},{name: 10}, {name:11}, {name:12}],
				door_list: [{name:'1'},{name:'2'},{name:'3'},{name:'4'},{name:'5'},{name:'6'},{name:'7'},{name:'8'}],
				isFocus:false,
				// isFocus2:false,
				currentIndex:0,
				current:0,
				titleType:['综合柜','层架柜','挂架柜'],
				cabName: 'Zb001',
				cabtype:0,
				// cabCard:'',
				// card:'',//刷卡
				rfid:[],//rfid
				scan:'',//扫码
				door:'',//门开关
			}
		},
		computed:{
			...mapState(['mainName']),
			placeholders(){
				return '请编辑'+this.titleType[this.currentIndex]+'名称'
			}
		},
		onReady() {
			// this.cabName = this.mainName
			this.card_list=uni.getStorageSync("card_list")
			console.log(this.card_list.length)
			this.scan_list=uni.getStorageSync("scan_list")
		},
		methods: {
			cardRadioChange(e){ //刷卡器
				console.log(e);
				this.card = e.detail.value
			},
			scanRadioChange(e){ //扫码器
				console.log(e);
				this.scan = e.detail.value
			},	
			doorRadioChange(e){ //门开关
				console.log(e);
				this.door = e.detail.value
			},
			checkboxChange(e) { //rfid
				console.log(e);
				this.rfid = e.detail.value
			},
			radioChange(e) { //添加柜子类型
				console.log(e);
				this.cabtype = e.detail.value
				console.log(this.cabtype);
			},
			//除聚焦样式
			blurStyle(){
				this.isFocus = false;
				if(this.cabName===''){
					uni.showToast({
						title:"主柜名字不能为空"
					})
					return
				}
			},
			// //除聚焦样式
			// blurStyle2(){
			// 	this.isFocus2 = false;
			// 	if(this.cabCard===''){
			// 		uni.showToast({
			// 			title:"卡号不能为空"
			// 		})
			// 		return
			// 	}
			// },
			// checkClick(index){
			// 	//修改选中样式
			// 	this.currentIndex = index;
			// },
			confirm(){
				if(this.cabName===''){
					uni.showToast({
						title:"主柜名字不能为空"
					})
					return
				}
				console.log(this.cabName,this.currentIndex+1);
				addMasterCabinet({
					name: this.cabName,
					type: this.currentIndex+1
				}).then(res=>{
					// const data=res.data;
					const data=85;
					console.log('主柜id',data);
					console.log(this.card_list,this.$refs.cardSpicks.select_index);
					console.log(this.scan_list);
					let mainType=""
					console.log(this.cabtype);
					if (this.cabtype == 0) {
						mainType = "综合柜"
					} else if (this.cabtype == 1) {
						mainType = "层架柜"
					} else if (this.cabtype == 2) {
						mainType = "挂架柜"
					}
					let mainCabinet={
						mainName:this.cabName,
						mainType:mainType,
						terminalId:data,
						minorList:[],//副柜列表
						type:this.cabtype+1,//类型 1-综合柜 2-层架柜 3-挂架柜
						card_id: this.card_list[this.$refs.cardSpicks.select_index].deviceId,
						// scan_id: this.scan_list[this.scan].deviceId, 
						rfid_id:this.rfid,
						door_id:this.door,
						door_status:false,//门状态
						door_pull:false,//拉出
						// door_status:true,//门状态
						// door_pull:true,//拉出
						authorizationList:[]//主柜授权人员列表
						}
					this.$store.dispatch('initCab',mainCabinet)
					uni.redirectTo({
						url: '../login/login'
					})
				})
				
			}
		}
	}
</script>

<style scoped lang="less">
.foundPage{
	display: flex;
	justify-content: center;
	position: relative;
	background: url(../../static/background3.jpg) no-repeat;
	background-size: cover;
	// height: 385rpx;
	// height: 1384rpx;
	height: calc(100vh - 72px);
}
.foundInfo{
	// width: 886rpx;
	// width: 30.76vw;
	width: 50vw;
	height: 100%;
	margin: 0 auto;
	// background: #FFFFFF;
}
.titleName{
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	margin: 15px 15px;
	letter-spacing: 3px;
	color: #FFFFFF;
}
// .contentBoxR {
// 	background:#F1F9FF;
// 	border-radius: 20rpx;
// 	// width: 790rpx;
// 	width: 27.44vw;
// 	margin: 0 auto;
// 	// margin-top: 62rpx;
// 	// margin-bottom: 30rpx;
// 	margin-bottom: 1.97vh;
// 	.titleR {
// 		color: #777777;
// 		font-size: 34rpx;
// 		padding:34rpx 0 34rpx 30rpx;
// 	}
// }
// .radioGroup {
// 	display: flex;
// 	flex-wrap:wrap;
// }
// .radio {
// 	display: flex;
// 	align-items: center;
// 	font-size: 36rpx;
// 	font-weight: 400;
// 	color: #777;
// 	margin:0 0 40rpx 60rpx;
// }
// .checkBox {
// 	width: 34rpx;
// 	height:34rpx;
// 	border-radius: 50%;
// 	border:1.2rpx solid #4F9AFF;
// 	display:flex;
// 	justify-content: center;
// 	align-items: center;
// 	box-sizing: border-box;
// 	margin-right:30rpx ;
// 	border-color:#999;
// }
// .check {
// 	width:27rpx;
// 	height:27rpx;
// 	border-radius: 50%;
// 	background: linear-gradient(0deg, rgba(114, 180, 255, 0.8), rgba(73, 153, 235, 0.8), rgba(43, 125, 209, 0.8));
// 	box-shadow: 0px 0px 0.58rpx 0px rgba(27, 67, 140, 0.5);
// 	box-sizing: border-box;
// 	opacity: 0;
// }
// .active {
// 	color:#4F9AFF;
// 	.checkBox {
// 		border-color:#4F9AFF;
// 		.check {
// 			opacity:1
// 		}
// 	}
// }
.contentBox {
	background:#F1F9FF;
	border-radius: 20rpx;
	// width: 790rpx;
	// width: 27.44vw;
	width: 45.44vw;
	margin: 0 auto;
	// margin-bottom: 30rpx;
	margin-bottom: 1.97vh;
	display: flex;
	align-items: center;
	padding: 20rpx 0;
}
.title {
	color: #777777;
	font-size: 34rpx;
	padding:24rpx 2rpx 24rpx 36rpx;
	box-sizing: border-box;
}
.name_box {
	// width:584rpx;
	// height: 88rpx;
	width: 20.25vw;
	height: 5.7vh;
	// line-height: 80rpx;
	line-height: 5.5vh;
	background: #FFFFFF;
	border: 4rpx solid #CCCCCC;
	border-radius:20rpx;
	font-size:36rpx;
	padding-left:45rpx;
	margin-left: 24rpx;
	color: #222;
	box-sizing: border-box;
}
.focusstyle {
	border: 4rpx solid #4F9AFF !important;
}
.search{
	display: flex;
	align-items: center;
	justify-content: center;
	.search-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		// width: 478rpx;
		// height: 110rpx;
		width: 16.67vw;
		height: 7.19vh;
		background: #4F9AFF;
		color: #FFFFFF;
		font-size: 41rpx;
		border-radius: 110rpx;
		letter-spacing: 5rpx;
	}
}	
	.contentTypeRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		display: flex;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.radioTypeTop {
			display: flex;
			align-items: center;
			padding: 34rpx 0 34rpx 30rpx;	
		}
	}
	.contentBoxRadio {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.radioTop {
			display: flex;
			align-items: center;
			padding: 0 0 34rpx 30rpx;
			
		}
	}
	.titleR {
		color: #777777;
		font-size: 34rpx;
		padding: 34rpx 0 34rpx 30rpx;
	}
	.radioInfo {
		display: flex;
		align-items: center;
		margin-right: 60rpx;
		.radioText {
			font-size: 34rpx;
			color: #777777;
		}
	}
	
	.contentBoxR {
		background: #F1F9FF;
		border-radius: 20rpx;
		// width: 790rpx;
		width: 45.44vw;
		margin: 0 auto;
		// margin-top: 30rpx;
		// margin-bottom: 30rpx;
		margin-top: 1.97vh;
		margin-bottom: 1.97vh;
		.titleR {
			color: #777777;
			font-size: 34rpx;
			padding: 34rpx 0 34rpx 30rpx;
		}
		.checkBtn{
			display: flex;
			flex-flow: row wrap;
			padding: 0 0 0 15px;
		}
		.checkInfo{
			display: flex;
			align-items: center;
			margin:0 30rpx 20rpx 0;
		}
		.checkText{
			font-size: 34rpx;
			color: #777777;
		}
	}
</style>
